<template>
  <div class="base-card" :class="cssClass" :style="cssStyle">
    <slot></slot>
  </div>
</template>

<script setup>
import { computed } from "vue";
import {
  formatGapSize,
  formatRadiusSize,
  formatBgColor,
  formatTextColor,
} from "@/utils/cssUtils";

let props = defineProps({
  color: String,
  gap: {
    type: [String, Boolean, Number],
    default: "md",
  },
  bg: {
    type: [String, Boolean],
    default: "d1",
  },
  radius: {
    type: [String, Boolean],
    default: "md",
  },
  outterGap: [String, Boolean, Number],
  bottomGap: [String, Boolean, Number],
});

const cardGap = computed(() => formatGapSize(props.gap));
const cardBg = computed(() => formatBgColor(props.bg));
const cardRadius = computed(() => formatRadiusSize(props.radius));
const cargBottomGap = computed(() => formatGapSize(props.bottomGap));
const cargOutterGap = computed(() => formatGapSize(props.outterGap));
const fontColor = computed(() => formatTextColor(props.color));
</script>

<style lang="scss" scoped>
.base-card {
  overflow: hidden;
  padding: v-bind(cardGap);
  border-radius: v-bind(cardRadius);
  margin: v-bind(cargOutterGap);
  margin-bottom: v-bind(cargBottomGap);
  background-color: v-bind(cardBg);
  color: v-bind(fontColor);
}
</style>
